<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, user-scalable=no"
    />

    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="threeStar.css" />
    <link
      rel="stylesheet"
      href="https://at.alicdn.com/t/c/font_4660838_ao75wsr114q.css"
    />
    <link rel="stylesheet" href="swiper/swiper-bundle.min.css" />

    <style>
      html,
      .swiper {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <header>
      <img src="images/logo.jpg" alt="" />
      <ul class="left">
        <li>三星商城</li>
        <li>AI</li>
        <li>手机平板</li>
        <li>电影影音</li>
        <li>生活家电</li>
        <li>存储</li>
        <li>显示器</li>
        <li>配件</li>
        <li>SmartThing</li>
      </ul>
      <ul class="right">
        <li>售后服务</li>
        <li>商用用户</li>
      </ul>
      <div class="icon">
        <i class="iconfont icon-sousuo"></i>
        <i class="iconfont icon-gouwuche"></i>
        <i class="iconfont icon-yonghu"></i>
        <i class="iconfont icon-liebiao2"></i>
      </div>
    </header>
    <div class="banner">
      <ul>
        <li>Lorem i dor</li>
        <li>Lorem m lor</li>
        <li>参数比较</li>
        <li>商品评价</li>
      </ul>
    </div>
    <div class="banner1">
      <span>半年后随时换新机</span>
      <div class="icon1">
        <i class="iconfont icon-shuangjiantou"></i>
        <i class="iconfont icon-24gl-bag2"></i>
        <i class="iconfont icon-aixinjuanzeng"></i>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-8 item1">
          <div class="swiper mySwiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="images/1.jpg" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="images/2.jpg" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="images/3.jpg" alt="" />
              </div>
            </div>
            <div class="swiper-button-next" style="color: #999"></div>
            <div class="swiper-button-prev" style="color: #999"></div>
          </div>
        </div>
        <div class="col-sm-4 col-xs-12 item2">
          <h2>型号</h2>
          <p class="text-muted">选择您的型号</p>
          <button type="button" class="btn btn-default">Galaxy Z Flip6</button>
          <p class="text-primary text-center">双卡槽设计，支持双卡双待</p>
          <h2>存储|内存</h2>
          <p class="text-muted">选择您的存储</p>
          <button type="button" class="btn btn-default">258GB</button>
          <button type="button" class="btn btn-default">258GB</button>
        </div>
      </div>
    </div>
    <div class="container two">
      <div class="page-header head1">
        <h3>三星订阅服务</h3>
      </div>
      <p class="text-muted">
        使用订阅服务购买，支付宝花呗授信冻结20%购机款，剩余80%购机款可享受24期0利率分期支付，您可选择在第6~24个月选择更换新机或退订手机、或买断手机。
      </p>
      <p class="text-muted">
        *微信小程序端口不支持订阅服务，更多订阅服务规则请点击"了解更多"。
      </p>

      <div class="row">
        <div class="col-xs-12 col-sm-6">
          <button type="button" class="btn btn-default btn-block">
            选择订阅服务
          </button>
        </div>
        <div class="col-xs-12 col-sm-6">
          <button type="button" class="btn btn-default btn-block">
            不，谢谢
          </button>
        </div>
      </div>

      <div class="page-header head2">
        <h3>保值换新</h3>
      </div>
      <p class="text-muted">
        *微信小程序端口不支持订阅服务，更多订阅服务规则请点击"了解更多"。
      </p>
      <div class="row">
        <div class="col-xs-12 col-sm-6">
          <button type="button" class="btn btn-default btn-block">
            确认，继续
          </button>
        </div>
        <div class="col-xs-12 col-sm-6">
          <button type="button" class="btn btn-default btn-block">
            不，谢谢
          </button>
        </div>
      </div>

      <div class="page-header head3">
        <h3>分期0利率</h3>
      </div>
      <div class="row row1">
        <div class="col-xs-12 col-sm-6">
          <button type="button" class="btn btn-default btn-block btn1">
            24期0利率
          </button>
        </div>
        <div class="col-xs-12 col-sm-6">
          <button type="button" class="btn btn-default btn-block btn1">
            700以旧换新
          </button>
        </div>
      </div>

      <div class="page-header head4">
        <h3>购机好礼</h3>
      </div>
      <p class="text-muted">
        *微信小程序端口不支持订阅服务，更多订阅服务规则请点击"了解更多"。
      </p>

      <div class="row">
        <div class="col-xs-12 col-sm-6">
          <button type="button" class="btn btn-default btn-block">
            高至700换新补贴，无忧服务礼包
          </button>
        </div>
        <div class="col-xs-12 col-sm-6">
          <button type="button" class="btn btn-default btn-block">
            高至700换新补贴，无忧服务礼包
          </button>
        </div>
      </div>

      <div class="page-header head5">
        <h3>以旧换新</h3>
      </div>
      <p class="text-muted">
        *微信小程序端口不支持订阅服务，更多订阅服务规则请点击"了解更多"。
      </p>

      <div class="row">
        <div class="col-xs-12 col-sm-6">
          <button type="button" class="btn btn-default btn-block">
            选择以旧换新
          </button>
        </div>
        <div class="col-xs-12 col-sm-6">
          <button type="button" class="btn btn-default btn-block">
            不选择以旧换新
          </button>
        </div>
      </div>

      <div class="row row2">
        <button type="button" class="btn btn-primary">
          选择换新补贴好礼 ，三星Z系列/W系列旧机估值≥200元享至高700元换新补贴
        </button>
      </div>

      <div class="page-header head6">
        <h3>管家服务</h3>
      </div>
      <p class="text-muted">一产品一服务，不可叠</p>

      <div class="row row3">
        <div class="col-xs-12 col-sm-3">
          <button type="button" class="btn btn-default btn-block">
            6个月1次优惠换屏服务
          </button>
        </div>
        <div class="col-xs-12 col-sm-3">
          <button type="button" class="btn btn-default btn-block">
            12个月1次优惠换屏服务
          </button>
        </div>
        <div class="col-xs-12 col-sm-3">
          <button type="button" class="btn btn-default btn-block">
            高至700换新补贴，无忧服务礼包
          </button>
        </div>
        <div class="col-xs-12 col-sm-3">
          <button type="button" class="btn btn-default btn-block">
            24个月1次优惠换屏服务
          </button>
        </div>
        <div class="col-xs-12 col-sm-3">
          <button type="button" class="btn btn-default btn-block">
            24个月2次优惠换屏服务
          </button>
        </div>
        <div class="col-xs-12 col-sm-3">
          <button type="button" class="btn btn-default btn-block">
            无需管家服务
          </button>
        </div>
      </div>
    </div>

    <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.js"></script>
    <!-- <script src="../swiper-bundle.min.js"></script> -->
    <script src="swiper/swiper-bundle.min.js"></script>

    <script>
      var swiper = new Swiper(".mySwiper", {
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    </script>
  </body>
</html>
